<template>
    <div class="tenantAuthSearchContainer">
        <span class="inputLabel">租户编码</span>
        <el-select v-model="tenantAuthSearchData.tenantId" placeholder="租户编码" class="searchInfoInput" :loading="tenantSearchLoading" clearable filterable remote :remote-method="tenantDataSearch">
            <el-option :label="item.tenantId" :value="item.tenantId" v-for="item in tenantDataList" :key="item.id"/>
        </el-select>

        <span class="inputLabel">用户账号</span>
        <el-select v-model="tenantAuthSearchData.userId" placeholder="用户账号" class="searchInfoInput" :loading="userSearchLoading" clearable filterable remote :remote-method="userInfoDataSearch">
            <el-option :label="item.userAccount" :value="item.id" v-for="item in userInfoDataList" :key="item.id"/>
        </el-select>

        <el-button type="primary" icon="SearchOutlined" :loading="searchLoading" class="searchButtonClass" @click="queryUserInfo()">搜索</el-button>
        <el-button icon="RedoOutlined" @click="resetInput()">重置</el-button>
    </div>
</template>

<script name="TenantAuthSearch" setup lang="ts">
import {tenantAuthInfoQuery, tenantInfoQuery} from "@/request/tenant";
import {userInfoQuery} from "@/request/user";
import {computed, ref} from "vue";
import {useTenantAuthStore} from "@/stores/userInfo/tenantAuth";

let tenantDataList = ref([]);
let userInfoDataList = ref([]);
let searchLoading = ref(false);
let tenantSearchLoading = ref(false);
let userSearchLoading = ref(false);

let tenantAuthSearchData = computed(() => {return useTenantAuthStore().tenantAuthSearchData});

function queryUserInfo() {
    searchLoading.value = true
    tenantAuthInfoQuery(tenantAuthSearchData.value).then(res => {
        if (res["code"] === '200') {
            useTenantAuthStore().resetTenantAuthDataList(res.data);
        }
        searchLoading.value = false
    }).catch(res => {
        searchLoading.value = false
    })
}

function resetInput() {
    useTenantAuthStore().resetTenantAuthSearchData({
        tenantId: '',
        userId: ''
    });
}

function userInfoDataSearch(query) {
    userSearchLoading.value = true
    let param = {
        pageInfo: {
            pageIndex: 1,
            pageSize: 100
        },
        userAccount: query
    }
    userInfoQuery(param).then(res => {
        userInfoDataList.value = res.data["dataList"];
        userSearchLoading.value = false
    }).catch(res => {
        userSearchLoading.value = false
    })
}

function tenantDataSearch(query) {
    tenantSearchLoading.value = true
    let param = {
        pageInfo: {
            pageIndex: 1,
            pageSize: 100
        },
        tenantId: query
    }
    tenantInfoQuery(param).then(res => {
        tenantDataList.value = res.data["dataList"];
        tenantSearchLoading.value = false
    }).catch(res => {
        tenantSearchLoading.value = false
    })
}
</script>

<style scoped lang="less">
.tenantAuthSearchContainer {
    width: 100%;
    height: 10%;
    .searchInfoInput {
        width: 15%;
        padding-left: 1%;
    }
    .inputLabel {
        padding-left: 1%;
        font-weight: 700;
        font-size: 15px;
        color: #606266;
    }
    .searchButtonClass {
        margin-left: 1%;
    }
}
</style>